<template>
    <ContentBox title="社保">
        <div class="nozi">
            <div>
                <div>
                    <div></div>
                    <div>
                        <div class="hl-red"><span class="digiter-number hl-red">123</span>亿</div>
                        <div>社保余额</div>
                    </div>
                    <div></div>
                    <div>
                        <div class="hl-green"><span class="digiter-number hl-green">123</span>万</div>
                        <div>社保余额</div>
                    </div>
                    <div></div>
                </div>
                <div>
                    <div>
                        <div class="hl-zi"><span class="digiter-number hl-zi">123</span>亿</div>
                        <div>社保余额</div>
                    </div>
                    <div></div>
                    <div>
                        <div class="hl-pink"><span class="digiter-number hl-pink">123</span>亿</div>
                        <div>社保余额</div>
                    </div>
                    <div></div>
                    <div>
                        <div class="hl-yellow"><span class="digiter-number hl-yellow">123</span>亿</div>
                        <div>社保余额</div>
                    </div>
                </div>
            </div>
            <div>
                <shebao></shebao>
            </div>
        </div>
    </ContentBox>
</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"
    import shebao from "./ChartsComponents/shebao"

    export default {
        name: "Preview",
        components: {
            ContentBox,
            shebao
        }
    }
</script>

<style lang="scss" scoped>
    .nozi {
        height: 100%;
        width: 100%;
        padding: 0 40px;

        display: flex;
        flex-direction: column;
        > div {

            &:first-child {
                height: 30%;

                display: flex;
                flex-direction: column;
                > div {
                    flex: 1;
                    display: flex;
                    > div {
                        flex: 1;

                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        > div {
                            font-size: 40px;
                        }
                    }
                }
            }

            &:last-child {
                flex: 1;
            }
        }
    }
</style>

